<template>
  <div class="container">
    <div class="text">如需固定上课，请在微信公众号回复“我要固定1对1上课”</div>
    <img class="qrcode" :src="global.RESOURCE + '/img/qrcode.png'">
    <div class="qrcode-text">长按关注「久趣英语服务号」</div>
    <div class="footer">如有疑问请在「久趣英语服务号」联系客服</div>
    <div class="mask" v-show="status">
      <div class="user-info" v-show="status === 'user-info'">
        <div class="title">填写宝贝资料</div>
        <div class="form">
          <div class="form-group nickname-group">
            <label class="input-label" for="nickname">昵称</label>
            <input v-model="userInfo.nickname" id="nickname" name="nickname" class="nickname" type="text" placeholder="请输入英文昵称">
            <div class="random" @click="userInfo.nickname = randomName(userInfo.gender)">随机</div>
          </div>
          <div class="form-group age-group">
            <label class="input-label">年龄</label>
            <input v-model="userInfo.birthday" id="birthday" name="birthday" type="date" class="age" placeholder="请选择孩子年龄">
            <label for="birthday">{{age}}</label>
          </div>
          <div class="form-group sex-group">
            <label class="input-label">性别</label>
            <input v-model="userInfo.gender" id="boy" type="radio" name="sex" value="1" hidden/>
            <label for="boy">男孩</label>
            <input v-model="userInfo.gender" id="girl" type="radio" name="sex" value="2" hidden/>
            <label for="girl">女孩</label>
          </div>
          <div class="form-group pwd-group" v-show="!userInfo.isPasswordSet">
            <label class="input-label" for="password">密码</label>
            <input v-model="userInfo.password" id="password" name="password" class="password" type="password" placeholder="6～12位新密码，数字加字母" maxlength="12">
          </div>
        </div>
        <div class="submit" id="updateUserProfile" @click="submitUserInfo">完成</div>
      </div>
      <div class="survey" v-show="status === 'survey'">
        <div class="title">填写问卷调查</div>
        <div class="in-school">
          <div class="in-school-title">Q1. 校内学了几年英语</div>
          <div class="in-school-list">
            <input v-model.number="surveys.answer1" id="in-school-1" type="radio" name="in-school" value="0" hidden/>
            <label for="in-school-1">没学过</label>
            <input v-model.number="surveys.answer1" id="in-school-2" type="radio" name="in-school" value="1" hidden/>
            <label for="in-school-2">1年</label>
            <input v-model.number="surveys.answer1" id="in-school-3" type="radio" name="in-school" value="2" hidden/>
            <label for="in-school-3">2年</label>
            <input v-model.number="surveys.answer1" id="in-school-4" type="radio" name="in-school" value="3" hidden/>
            <label for="in-school-4" style="margin-right: 0;">3年</label>
            <input v-model.number="surveys.answer1" id="in-school-5" type="radio" name="in-school" value="4" hidden/>
            <label for="in-school-5">4年</label>
            <input v-model.number="surveys.answer1" id="in-school-6" type="radio" name="in-school" value="5" hidden/>
            <label for="in-school-6">≥5年</label>
          </div>
        </div>
        <div class="out-school">
          <div class="out-school-title">Q2. 校外学了几年英语</div>
          <div class="out-school-list">
            <input v-model.number="surveys.answer2" id="out-school-1" type="radio" name="out-school" value="0" hidden/>
            <label for="out-school-1">没学过</label>
            <input v-model.number="surveys.answer2" id="out-school-2" type="radio" name="out-school" value="1" hidden/>
            <label for="out-school-2">1年</label>
            <input v-model.number="surveys.answer2" id="out-school-3" type="radio" name="out-school" value="2" hidden/>
            <label for="out-school-3">2年</label>
            <input v-model.number="surveys.answer2" id="out-school-4" type="radio" name="out-school" value="3" hidden/>
            <label for="out-school-4" style="margin-right: 0;">3年</label>
            <input v-model.number="surveys.answer2" id="out-school-5" type="radio" name="out-school" value="4" hidden/>
            <label for="out-school-5">4年</label>
            <input v-model.number="surveys.answer2" id="out-school-6" type="radio" name="out-school" value="5" hidden/>
            <label for="out-school-6">≥5年</label>
          </div>
        </div>
        <div class="submit" id="submitSurvey" @click="submitSurvey">提交资料</div>
      </div>
      <div class="class-time" v-show="status === 'class-time'">
        <div class="title">选择上课时间偏好</div>
        <div class="weeken">
          <input v-model.number="week" id="weeken-1" type="radio" name="weeken" value="2" hidden/>
          <label for="weeken-1">每周2课</label>
          <input v-model.number="week" id="weeken-2" type="radio" name="weeken" value="3" hidden/>
          <label for="weeken-2">每周3课</label>
        </div>
        <div class="frequency">
          <div class="class-frequency-title">每周上课频率</div>
          <div id="frequency" class="class-frequency-list">
            <input v-model="frequency" id="frequency-1" type="checkbox" name="frequency" value="d1" hidden/>
            <label for="frequency-1">周一</label>
            <input v-model="frequency" id="frequency-2" type="checkbox" name="frequency" value="d2" hidden/>
            <label for="frequency-2">周二</label>
            <input v-model="frequency" id="frequency-3" type="checkbox" name="frequency" value="d3" hidden/>
            <label for="frequency-3">周三</label>
            <input v-model="frequency" id="frequency-4" type="checkbox" name="frequency" value="d4" hidden/>
            <label for="frequency-4" style="margin-right: 0;">周四</label>
            <input v-model="frequency" id="frequency-5" type="checkbox" name="frequency" value="d5" hidden/>
            <label for="frequency-5">周五</label>
            <input v-model="frequency" id="frequency-6" type="checkbox" name="frequency" value="d6" hidden/>
            <label for="frequency-6">周六</label>
            <input v-model="frequency" id="frequency-7" type="checkbox" name="frequency" value="d7" hidden/>
            <label for="frequency-7">周日</label>
          </div>
        </div>
        <div class="time">
          <div class="class-time-title">每次上课时段</div>
          <div class="class-time-title2">* 仅限周六日安排上午课程</div>
          <div class="class-time-list">
            <input v-model="time" id="time-1" type="checkbox" name="time" value="t1" hidden/>
            <label for="time-1">08:40</label>
            <input v-model="time" id="time-2" type="checkbox" name="time" value="t2" hidden/>
            <label for="time-2">09:20</label>
            <input v-model="time" id="time-3" type="checkbox" name="time" value="t3" hidden/>
            <label for="time-3">10:00</label>
            <input v-model="time" id="time-4" type="checkbox" name="time" value="t4" hidden/>
            <label for="time-4">10:40</label>
            <input v-model="time" id="time-5" type="checkbox" name="time" value="t5" hidden/>
            <label for="time-5" style="margin-right: 0;">11:20</label>
            <input v-model="time" id="time-7" type="checkbox" name="time" value="t7" hidden/>
            <label for="time-7">18:40</label>
            <input v-model="time" id="time-8" type="checkbox" name="time" value="t8" hidden/>
            <label for="time-8">19:20</label>
            <input v-model="time" id="time-9" type="checkbox" name="time" value="t9" hidden/>
            <label for="time-9">20:00</label>
            <input v-model="time" id="time-10" type="checkbox" name="time" value="t10" hidden/>
            <label for="time-10">20:40</label>
          </div>
        </div>
        <div class="submit" id="submitClassTime" @click="submitTimeTable">确认</div>
      </div>
    </div>
  </div>
</template>

<script>
  const account = new Account()
  utils.initWechatShare({
    title: '【Qkids久趣】4-12岁，在家跟北美外教学英语，新用户100元体验！',
    desc: '严选北美外教在线授课，创造趣味十足的课堂体验，让孩子爱学更有效。',
    link: `${window.location.protocol}//${window.location.host}/wx`,
    imgUrl: 'https://static-app.97kid.com/site-student/public/img/share.png'
  })
  utils.supportPromise(account)
  export default {
    name: 'Verify',
    data () {
      return {
        userInfo: {},
        status: '',
        surveys: {
          answer1: 0,
          answer2: 0
        },
        week: 2,
        frequencyList: [],
        timeList: []
      }
    },
    watch: {
      week () {
        this.frequencyList = this.frequency = this.timeList = this.time = []
      }
    },
    computed: {
      age () {
        return this.userInfo.birthday ? `${utils.getAge(this.userInfo.birthday)}岁` : '请选择孩子年龄'
      },
      frequency: {
        get () { return this.frequencyList },
        set (f) {
          if (f.length > this.week) f.shift()
          this.frequencyList = f
        }
      },
      time: {
        get () { return this.timeList },
        set (t) {
          if (t.length > this.week) t.shift()
          this.timeList = t
        }
      }
    },
    mounted () {
      this.userStatus()
    },
    methods: {
      // 随机生成nickname
      randomName,
      // 判断用户状态
      async userStatus () {
        const userInfo = this.userInfo = await account.$getUserInfo(true, true)
        console.log(userInfo)
        // if (!userInfo.isPasswordSet || !userInfo.nickname || !userInfo.birthday) {
        //   // 有设置密码 但没用户资料 弹用户资料 但不弹密码
        //   this.status = 'user-info'
        // } else if (!(userInfo.survey || userInfo.level > 0)) {
        //   // 没有问卷调查 弹问卷调查
        //   this.status = 'survey'
        // } else if (!userInfo.timeTable) {
        //   // 没有上课时间 弹上课时间
        //   this.status = 'class-time'
        // } else {
        //   // 所有资料都齐全不显示弹窗
        //   this.status = ''
				// }
				this.status = 'user-info'
      },
      // 提交用户信息
      async submitUserInfo () {
        const {nickname, birthday, gender, password, isPasswordSet} = this.userInfo
        try {
          if (!nickname) throw Error('昵称不能为空')
          if (!birthday) throw Error('生日不能为空')
          await account.$ajax({
            type: 'POST',
            path: `/s/user/`,
            data: {nickname, gender, birthday}
          })
          if (!isPasswordSet) {
            if (password.length >= 6 &&
              password.length <= 12 &&
              /^[0-9a-zA-Z]*$/.test(password)
            ) {
              await account.$ajax({
                type: 'POST',
                path: `/s/user/password`,
                data: {password}
              })
            } else {
              utils.toast('密码格式不正确')
            }
          }
          await this.userStatus()
        } catch (err) {
          utils.toast(err.message ? err.message : err)
        }
      },
      // 提交问卷调查
      async submitSurvey () {
        try {
          await account.$ajax({
            type: 'POST',
            path: `/s/surveys`,
            data: {
              ...this.userInfo,
              ...this.surveys
            }
          })
          await this.userStatus()
        } catch (err) {
          utils.toast(err.message ? err.message : err)
        }
      },
      // 提交时间偏好设置
      async submitTimeTable () {
        try {
          if (this.frequencyList.length !== this.week) throw Error(`请选择${this.week}节上课频率`)
          if (this.timeList.length <= 0 || this.timeList.length > this.week) throw Error('请选择上课时段')
          const data = {}
          this.frequencyList.forEach(frequency => {
            this.timeList.forEach(time => {
              data[`${frequency}_${time}`] = 1
            })
          })
          await account.$ajax({
            type: 'PUT',
            path: `/s/user/timeTable`,
            data
          })
          await this.userStatus()
        } catch (err) {
          utils.toast(err.message ? err.message : err)
        }
      }
    }
  }
</script>
